<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>图书管理系统</title>

<link href="../css/bootstrap.min.css" rel="stylesheet" type="text/css">

<script src="../js/jquery-1.11.2.min.js" type="text/javascript"></script>
<script src="../js/bootstrap.js" type="text/javascript"></script>

<!-- 导航栏图书检索 -->
<script type="text/javascript">
	function toSearch() {
		window.location.href = "../Book/BookSearch.jsp?book_id=" + document.getElementById("book_id").value;
	}
</script>

<!-- 渲染个人信息 -->
<script type="text/javascript">
	window.onload = function() {
		onload();
	}
</script>

<!-- 渲染数据函数 -->
<script type="text/javascript">
	function onload() {
		
		var user = JSON.parse('<%= session.getAttribute("user") %>');
		if('${user_type}'=="manager") {
			document.getElementById("user_id").innerHTML = user.manager_ID;
			document.getElementById("name").innerHTML = user.name;
			document.getElementById("type").innerHTML = "管理员";
		} else if('${user_type}'=="reader") {
			document.getElementById("user_id").innerHTML = user.reader_ID;
			document.getElementById("name").innerHTML = user.name;
			document.getElementById("type").innerHTML = "读者";
			document.getElementById("sex").innerHTML = user.sex;
			document.getElementById("age").innerHTML = user.age;
		}
	}
</script>

<!-- 渲染修改模态框 -->
<script type="text/javascript">
	function getData() {
		if('${user_type}'=="manager") {
			document.getElementById("editor_user_id").innerHTML = document.getElementById("user_id").innerHTML;
			document.getElementById("editor_name").value = document.getElementById("name").innerHTML;
			document.getElementById("editor_type").innerHTML = document.getElementById("type").innerHTML;
			document.getElementById("editor_sex").setAttribute("disabled", "disabled");
			document.getElementById("editor_age").setAttribute("disabled", "disabled");
		} else if('${user_type}'=="reader") {
			document.getElementById("editor_sex").removeAttribute("disabled");
			document.getElementById("editor_age").removeAttribute("disabled");
			document.getElementById("editor_user_id").innerHTML = document.getElementById("user_id").innerHTML;
			document.getElementById("editor_name").value = document.getElementById("name").innerHTML;
			document.getElementById("editor_type").innerHTML = document.getElementById("type").innerHTML;
			document.getElementById("editor_sex").value = document.getElementById("sex").innerHTML;
			document.getElementById("editor_age").value = document.getElementById("age").innerHTML;
		}
	}
</script>
<!-- 修改个人信息 -->
<script type="text/javascript">
	function update() {
		var user_type = "${user_type}";
		var user_id = document.getElementById("editor_user_id").innerHTML;
		var name = document.getElementById("editor_name").value;
		var sex = document.getElementById("editor_sex").value;
		var age = document.getElementById("editor_age").value;
		if(name.length==0) {
			alert("姓名不能为空！");
		}else {
			if(user_type=="manager") {
				ajax(user_type,user_id,name,"",0);
			} else if(user_type=="reader") {
				if(age.length==0) {
				alert("年龄不能为空！");
				}else if(!age.match("[0-9]+")) {
					alert("请填写正确年龄！");
				} else {
					ajax(user_type,user_id,name,sex,age);
				}
			}
		}
	}
</script>

<!-- 提交修改信息ajax请求 -->
<script type="text/javascript">
	function ajax(user_type, user_id, name, sex, age) {
		$.ajax({
			type:"POST",
			url:"./userUpdate.do",
			data:{user_type:user_type, user_id:user_id, name:name, sex:sex, age:age},
			dataType:"json",
			success:function(data) {
				if(data.code=="200") {
					// 修改成功
					alert(data.msg);
					window.location.href="./PersonalImfo.jsp";
				} else if(data.code=="401") {
					// 用户类型异常
					alert(data.msg);
				} else if(data.code=="402") {
					// 用户不存在
					alert(data.msg);
				} else {
					// 未知错误
					alert("未知错误！");
				}
			},
			error:function() {
				// 发送请求失败
				alert("发送请求失败！");
			}
		});
	}
</script>

</head>

<body>

<!-- 大背景 -->
	<div class="container" align="center"
		style=" width:auto; height:768px; background-color:#BFEDEA; background-image:url(../img/bg2.png); -moz-background-size:100% 100%; background-size:100% 100%;">

		<!-- 导航栏 -->
		<div style="width:100%; height:auto;">
			<nav class="navbar navbar-default">
				<div class="container-fluid">
					<!-- Brand and toggle get grouped for better mobile display -->
					<div class="navbar-header">

						<a class="navbar-brand" href="../main.jsp">首页</a>
					</div>
					<!-- Collect the nav links, forms, and other content for toggling -->
					<div class="collapse navbar-collapse" id="defaultNavbar1">
						<ul class="nav navbar-nav">
							<!-- 图书管理下拉框 -->
							<li class="dropdown"><a href="#" class="dropdown-toggle"
								data-toggle="dropdown" role="button" aria-expanded="false">图书管理<span
									class="caret"></span></a>
								<ul class="dropdown-menu" role="menu">
									<li><a id="bookManage" href="../Book/BookManage.jsp">管理图书</a></li>
									<li><a id="bookSearch" href="../Book/BookSearch.jsp">图书查询</a></li>
									<li><a id="bookBorrow" href="../Book/BookBorrow.jsp">图书借阅</a></li>
									<li><a id="bookReturn" href="../Book/BookReturn.jsp">图书归还</a></li>
								</ul></li>
								
							<!-- 违规管理下拉框 -->
							<li class="dropdown" id="violation_manage"><a href="#"
								class="dropdown-toggle" data-toggle="dropdown" role="button"
								aria-expanded="false">违规管理<span class="caret"></span></a>
								<ul class="dropdown-menu" role="menu">
									<li><a href="../Violation/ViolationManage.jsp">管理违规记录</a></li>
									<li><a href="../Violation/ViolationReg.jsp">违规登记</a></li>
								</ul></li>

							<!-- 个人中心下拉框 -->
							<li class="dropdown"><a href="#" class="dropdown-toggle"
								data-toggle="dropdown" role="button" aria-expanded="false">个人中心<span
									class="caret"></span></a>
								<ul class="dropdown-menu" role="menu">
									<li><a href="./PersonalImfo.jsp">个人资料</a></li>
									<li id="bookHistory"><a href="./BookHistory.jsp">借阅记录</a></li>
									<li id="violationHistory"><a
										href="./ViolationHistory.jsp">违规记录</a></li>
									<li><a onclick="location='./Logout.do'" >退出登录</a></li>
								</ul></li>

						</ul>
						<!-- 搜索栏 -->
						<div style="float:right;">
							<form class="navbar-form navbar-left" role="search">
								<div class="form-group">
									<input type="text" id="book_id" class="form-control"
										placeholder="输入图书编号">
								</div>
								<button type="button" class="btn btn-default"
									onclick="toSearch()">查询</button>
							</form>
						</div>

				</div>
				<!-- /.navbar-collapse -->
			</div>
			<!-- /.container-fluid --> </nav>
		</div>
        
        <div class="container" align="center" style="width:80%; height:85%; background-color:rgba(255, 255, 255, 0.5);">
       	   <div align="center" style="text-align:center;">
            	<label style="margin:15px 0 0 0; font-family:华文行楷; font-size:35px;">个人资料</label>
                <hr>
            </div>
            <div>
            	<table style="font-size:18px;">
                	<tr>
                    	<td colspan="2"><img src="" alt="用户照片" /></td>
                    </tr>
                    <tr>
                    	<td><label>ID：</label></td>
                        <td> <label id="user_id"></label></td>
                    </tr>
                    <tr>
                    	<td><label>姓名：</label></td>
                        <td> <label id="name"></label></td>
                    </tr>
                    <tr>
                    	<td><label>身份：</label></td>
                        <td> <label id="type"></label></td>
                    </tr>
                    <tr>
                    	<td><label>性别：</label></td>
                        <td> <label id="sex"></label></td>
                    </tr>
                    <tr>
                    	<td><label>年龄：</label></td>
                        <td> <label id="age"></label></td>
                    </tr>
                    <tr>
                    	<td colspan="2"><button type="button" data-toggle="modal" data-target="#editor" onclick="getData()">修改</button></td>
                        
                    </tr>
                </table>
            	
               
            </div>
            </div>
    </div>
    
    <!-- 修改个人信息模态框（Modal） -->
		<div class="modal fade" id="editor" tabindex="-1" role="dialog"
			aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-hidden="true">&times;</button>
						<h4 class="modal-title" id="myModalLabel">个人信息编辑</h4>
					</div>
					<div class="modal-body">
						<table>
							<tr>
								<td>ID：</td>
								<td><lable id="editor_user_id"></lable></td>
							</tr>
							<tr>
								<td>姓名：</td>
								<td><input type="text" id="editor_name" /></td>
							</tr>
							<tr>
								<td>身份：</td>
								<td><label id="editor_type"></label></td>
							</tr>
							<tr>
								<td>性别：</td>
								<td><select id="editor_sex">
										<option value="男" selected="selected">男</option>
										<option value="女">女</option>
								</select></td>
							</tr>
							<tr>
								<td>年龄：</td>
								<td><input type="text" id="editor_age" /></td>
							</tr>
							

						</table>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-primary" onclick="update()">确定修改</button>
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					</div>
				</div>
				<!-- /.modal-content -->
			</div>
			<!-- /.modal -->
			</div>
</body>

<!-- 权限控制 -->
<script type="text/javascript">
 	var user_type = "<%=session.getAttribute("user_type")%>";
 	if(user_type!=null) {
 		if(user_type=="reader") {
			document.getElementById("bookManage").style['pointer-events'] = 'none';
			document.getElementById("bookBorrow").style['pointer-events'] = 'none';
			document.getElementById("bookReturn").style['pointer-events'] = 'none';
 		} else {
 			document.getElementById("bookHistory").style['pointer-events'] = 'none';
 			document.getElementById("violationHistory").style['pointer-events'] = 'none';
 		}
 	}
</script>

</html>
